import { Callout, Sandpack } from '@/components'

# PrefetchInfiniteQuery

React hook의 제약을 피해 JSX상에서도 usePrefetchInfiniteQuery를 사용할 수 있게 하는 컴포넌트입니다.

```jsx /PrefetchInfiniteQuery/
import {
  PrefetchInfiniteQuery,
  useSuspenseQuery,
} from '@suspensive/react-query'

const PostsPage = () => {
  const { data: posts } = useSuspenseQuery({
    queryKey: ['posts'],
    queryFn: () => getPosts(),
  })

  return posts.map((post) => (
    <div key={post.id}>
      {/* 🚫 React hook의 제약으로 usePrefetchInfiniteQuery를 사용하지 못합니다
      // usePrefetchInfiniteQuery({
      //   queryKey: ['posts', post.id, 'comments'],
      //   queryFn: () => getPostComments(post.id),
      // })

      // ✅ Post Comments 페이지에 들어가기 전에 각각의 post comments query에 대해 usePrefetchInfiniteQuery를 호출할 수 있습니다. */}
      <PrefetchInfiniteQuery
        queryKey={['posts', post.id, 'comments']}
        queryFn={() => getPostComments(post.id)}
      />
      <h2>{post.title}</h2>
      <p>{post.description}</p>
      <Link to={`/posts/${post.id}/comments`}>See comments</Link>
    </div>
  ))
}
```
